<!--
 * @Author: @yzcheng
 * @Date: 2021-03-23 13:39:50
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 
 * @LastEditTime: 2021-03-27 11:07:17
-->
<template>
  <div class="create_task">
    <el-form ref="form" size="small" label-width="80px" :rules="rules">
      <el-row gutter="30">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item :label-width="'100px'" :label="$t('flowTask.flowKey')">
            <el-input v-model="taskInfo.processDefinitionKey"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.detailsForm.leavePeople')"
          >
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item :label-width="'100px'" :label="$t('flowTask.apply')">
            <el-input disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item :label-width="'100px'" :label="$t('flowTask.agent')">
            <el-input disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.applyDate')"
          >
            <el-input disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.form.leaveType')"
          >
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.detailsForm.belongsDepartment')"
          >
            <el-input disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.form.type')"
          >
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.detailsForm.createTime')"
          >
            <el-date-picker
              v-model="startTime"
              type="datetime"
              :placeholder="$t('validate.pleaseChoose')"
              align="right"
              :shortcuts="shortcuts"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.detailsForm.endTime')"
          >
            <el-date-picker
              width="100"
              v-model="endTime"
              type="datetime"
              :placeholder="$t('validate.pleaseChoose')"
              align="right"
              :shortcuts="shortcuts"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.applyDays')"
          >
            <el-input v-model="taskInfo.formData.day" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item
            :label-width="'100px'"
            :label="$t('flowTask.leaveReason')"
          >
            <el-input v-model="taskInfo.formData.reason"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item :label-width="'100px'" :label="$t('form.remarks')">
            <el-input
              v-model="taskInfo.formData.remark"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :offset="3">
          <el-form-item :label-width="'0px'">
            <el-button @click="submitTask(taskInfo)" type="primary">{{
              $t("common.ok")
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      startTime: new Date(new Date().getTime()),
      endTime: new Date(new Date().getTime() - 3600 * 1000 * 24),
      shortcuts: [
        {
          text: "今天",
          value: new Date(),
        },
        {
          text: "昨天",
          value: (() => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
          })(),
        },
        {
          text: "一周前",
          value: (() => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
          })(),
        },
      ],
      taskInfo: {
        formId: "dbe732eb857a3b4de74371aa5cf4d6d8",
        processDefinitionKey: "Process_1",
        formData: {
          remark: "",
          reason: "请假看病",
          day: "1",
        },
      },
    };
  },

  components: {},
  watch: {
    startTime(newTime, oldTime) {
      if (this.startTime && this.endTime) {
        this.taskInfo.formData.day = this.$dayjs.getTime(
          this.startTime,
          this.endTime
        );
      }
    },
    endTime(newTime, oldTime) {
      if (this.startTime && this.endTime) {
        console.log(this.startTime);
        console.log(this.endTime);
        this.taskInfo.formData.day = this.$dayjs.getTime(
          this.startTime,
          this.endTime
        );
      }
    },
  },
  computed: {
    combined() {
      return 1;
    },
  },

  // mounted() {},

  methods: {
    async submitTask(taskInfo) {
      await this.startTask(taskInfo);
      this.$router.push("/ProcessManagement/todoList");
    },
    ...mapActions("todoListStore", ["startTask"]),
  },
};
</script>
<style lang='scss' scoped>
.create_task {
  width: 60%;
  padding: 20px;
}
</style>
<style lang="scss">
.create_task {
  .el-input {
    width: 100% !important;
  }
}
</style>
